<template>
  <div class="hello">
    {{ hello }}
    {{ 1+1 }}
    {{ "哈哈" }}
    {{ 0 > 10 ? "right" : "wrong"}}
    {{ "注意只能是单行语句" }}
    <p>{{ flag }}</p>
    <p v-html="hello"></p>
    <p v-text="hello"></p>

    <span v-bind:class="ha">哈哈</span>
    <span v-bind:title="ts">提示</span>
    {{ message.split('').reverse().join('')}}

    <template v-if="show">
      <p>满足if显示了</p>
      <span>我们都显示了1</span>
    </template>
    <template v-else>
      <p>满足else显示了</p>
      <span>else的span2</span>
    </template>

    <p v-show="show">我是v-show显示出来的</p>

    <div>
      <ul>
        <li v-for="(name,index) in names" :key="index">{{ index }} - {{ name }}</li>
      </ul>
      <ul>
        <li v-for="(user,index) in users" :key="index">
          <span>{{ user.id }}</span>
          <span>{{ user.name }}</span>
          <span>{{ user.age }}</span>
        </li>
      </ul>
    </div>

    <button v-on:click="num++">点击+1</button>
    {{ num }}
    <button v-on:click="handClick">点击函数</button>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      num:1,
      hello: '<p>Hello vue</p>',
      ha:"ha",
      ts:"我是提示",
      message:"hello world",
      show:true,
      names:['xm', 'xl', 'xz'],
      users:[
        {id:1,name:'xm',age:22},
        {id:2,name:'xl',age:23},
        {id:3,name:'xz',age:24},
      ]
    }
  },
  methods:{
    handClick(){
      console.log(this) // this指向当前vue组件
      // this来索引data中的数据
      this.show = !this.show
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.ha{
  color:red;
}
</style>
